<template>
  <div class="header">
    <div class="navTop">
      <span class="choose1">
        <router-link to="/">首页</router-link>
        <a href="#">华为官网</a>
        <a href="#">v码(优购码)</a>
        <a href="#">企业购</a>
        <a href="#">Select Region</a>
        <div class="dropDown">
          <button class="dropBtn">
            <a>更多精彩<i class="iconfont icon-iconfontjiantou myicon"></i></a>
          </button>
          <div class="dropContent">
            <a href="#">EMUI</a>
            <a href="#">应用市场</a>
            <a href="#">华为终端云空间</a>
            <a href="#">开发者联盟</a>
          </div>
        </div>
      </span>
      <span class="choose">
        <div style="display: inline-block" v-if="token ? false : true">
          <router-link to="/login">请登录</router-link>
          <router-link to="register">注册</router-link>
        </div>
        <div style="display: inline-block" v-else>
          <span style="color: #fff; margin-right: 10px">{{ name }}</span>
          <el-button type="danger" size="small" plain @click="logout"
            >退出登录</el-button
          >
        </div>
        <router-link to="/order">我的订单</router-link>
        <div class="dropDown">
          <button class="dropBtn">
            <a>客户服务<i class="iconfont icon-iconfontjiantou myicon"></i></a>
          </button>
          <div class="dropContent">
            <a href="#">服务中心</a>
            <a href="#">联系客服</a>
          </div>
        </div>
        <div class="dropDownWeb">
          <button class="dropBtnWeb">
            <a href="HUAWEI.html" target="_blank"
              >网站导航<i class="iconfont icon-iconfontjiantou myicon"></i
            ></a>
          </button>
          <div class="dropContentWeb">
            <div class="webnav">
              <div class="home">
                <i class="iconfont icon-home myicon"></i>
                <a href="HUAWEI.html">商城首页</a>
              </div>
              <div>
                <ul>
                  频道
                  <li>
                    <div class="item"><a href="#">华为专区</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">荣耀专区</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">企业购</a></div>
                  </li>
                </ul>
              </div>
              <div>
                <ul>
                  产品
                  <li>
                    <div class="item"><a href="#">手机</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">智能家居</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">平板&笔记本</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">通用配件</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">智能穿越</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">专属配件</a></div>
                  </li>
                </ul>
              </div>
              <div>
                <ul>
                  增值服务
                  <li>
                    <div class="item"><a href="#">以旧换新</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">礼品包装</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">补购保障</a></div>
                  </li>
                  <li>
                    <div class="item"><a href="#">99元换电池</a></div>
                  </li>
                </ul>
              </div>
              <div>
                <ul>
                  会员
                  <li>
                    <div class="item"><a href="#">会员服务</a></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="dropDownphone">
          <button class="dropBtnphone">
            <a>手机版<i class="iconfont icon-iconfontjiantou myicon"></i></a>
          </button>
          <div class="dropContentphone">
            <div class="huaweiapp">
              <div class="appcontent">
                <a href="https://www.vmall.com/appdownload">
                  <img class="appimg" src="./images/20181029165607165.png" />
                </a>
                <div class="huaweiappword">
                  <h2>华为商城app</h2>
                  <p>
                    新人专享好礼<br />
                    最高1000积分
                  </p>
                  <i class="iconfont icon-android"></i>
                  <i class="iconfont icon-wechat"></i>
                </div>
              </div>
            </div>
            <div class="huaweiapp">
              <div class="appcontent">
                <a href="https://www.vmall.com/appdownload">
                  <img class="appimg" src="./images/20181116180507506.jpg" />
                </a>
                <div class="huaweiappword">
                  <h2>华为商城公众号</h2>
                  <p class="special">微信扫一扫</p>
                  <i class="iconfont icon-wechat"></i>
                </div>
              </div>
            </div>
            <div class="huaweiapp">
              <div class="appcontent">
                <a href="https://www.vmall.com/appdownload">
                  <img class="appimg" src="./images/6Y7SW4v4hnJ9kl9fDC9d.jpg" />
                </a>
                <div class="huaweiappword">
                  <h2>微信小程序</h2>
                  <p class="special">微信扫一扫</p>
                  <i class="iconfont icon-wechat"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dropDowncart">
          <button class="dropBtncart">
            <router-link to="/shopcart"> 购物车 </router-link>
          </button>
          <!-- <div class="dropContentcart">
            <div class="carthome">
              <i class="iconfont icon-cart myicon"></i>
            </div>
            <div class="cartword">
              <p>您的购物车是空的，赶紧选购吧~</p>
            </div>
          </div> -->
        </div>
      </span>
    </div>
    <Nav></Nav>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Nav from "../Nav";
export default {
  name: "Header",
  components: {
    Nav,
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions("user", ["getLogout"]),
    async logout() {
      await this.getLogout();
      window.location.reload();
      this.$router.history.push("/home");
    },
  },
  computed: {
    ...mapState("user", ["token", "name"]),
  },
};
</script>
<style lang="less" scoped>
.header {
  background-color: #2e2828;
}
.navTop {
  display: flex;
  margin: 0;
  box-sizing: border-box;
  margin: 0 auto;
  width: 1200px;
  height: 36px;
  line-height: 36px;
  position: relative;
  justify-content: space-between;
  flex-wrap: nowrap;
  z-index: 66;
}
.navTop span {
  display: inline-block;
  padding: 0;
}
.navTop a {
  display: inline-block;
  padding: 0 4px;
  color: #a4a4a4;
  text-decoration: none;
  font-size: 10px;
  margin-right: 10px;
}
.navTop a:hover {
  color: #fff;
}
.navTop a:after {
  padding-left: 6px;
  position: absolute;
  content: "";
  top: 14px;
  height: 10px;
}
.navTop i:after {
  padding-left: 6px;
  position: absolute;
  content: "";
  top: 8px;
  height: 10px;
}

.navTop span a:last-child:after {
  content: " ";
  border: none;
}
.navTop .choose a:first-child:after {
  content: "";
  border: none;
}
.navTop .choose a:first-child {
  padding-right: 2px;
}
.dropBtn .myicon {
  font-size: 10px;
}
.dropBtnWeb .myicon {
  font-size: 10px;
}
.dropBtnphone .myicon {
  font-size: 10px;
}
.dropContentWeb .webnav .home {
  width: 60px;
  height: 60px;
  float: left;
  color: #777;
  border-radius: 25px;
  background: #f7f7f7;
  display: block;
  margin: 37px 46px 0 49px;
  text-align: center;
}
.dropContentWeb .webnav .myicon {
  font-size: 25px;
}
.dropContent a:after {
  content: "";
  border: none;
}
.dropContentWeb a:after {
  content: "";
  border: none;
}
.dropBtnphone {
  color: #a4a4a4;
  border: none;
  cursor: pointer;
}
.dropDownphone {
  margin: 0;
  position: relative;
  display: inline-block;
}
.dropContentphone {
  position: absolute;
  display: none;
  background: #fff;
  padding-bottom: 20px;
  box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px 0 8px 8px;
  right: 0;
}
.dropDownphone:hover .dropBtnphone {
  background-color: white;
}

.dropDownphone:hover .dropContentphone {
  display: block;
}

.dropContentphone .huaweiapp {
  padding: 20px 0 20px 0;
  width: 244px;
  border-bottom: 1px solid #e5e5e5;
  padding-left: 24px;
  overflow: hidden;
  /* display: inline-block; */
}
/* .huaweiapp::after {
    content: '';
    display: block;
    clear: both;
 } */
.dropContentphone .huaweiapp .appcontent a {
  float: left;
}
.dropContentphone .huaweiapp .appcontent .appimg {
  display: block;
  width: 90px;
  height: 90px;
  margin-right: 12px;
}
.dropContentphone .huaweiapp .appcontent .huaweiappword {
  float: left;
  line-height: 18px;
}
.dropContentphone .huaweiapp .appcontent .huaweiappword h2 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 2px;
  margin-top: 0;
}
.dropContentphone .huaweiapp .appcontent .huaweiappword p {
  color: #cb242b;
  font-size: 12px;
  margin-top: 2px;
  line-height: 16px;
}
.dropContentphone .huaweiapp .appcontent .huaweiappword .special {
  color: #848384;
}
.dropContentphone .huaweiapp .huaweiappword i:after {
  content: "";
  border: none;
}
.dropContentphone .huaweiapp:last-child {
  border: none;
}
/* 更多精彩 */
.dropBtn {
  color: #a4a4a4;
  border: none;
  cursor: pointer;
}
.dropDown {
  margin: 0;
  position: relative;
  display: inline-block;
}
.dropContent {
  position: absolute;
  display: none;
  background: #fff;
  box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px 0 8px 8px;
}
.dropDown:hover .dropBtn {
  background-color: #fff;
}
.dropBtn a:hover,
.dropBtnphone a:hover,
.dropBtnWeb a:hover,
.dropBtncart a:hover {
  color: #cb242b;
}

.dropContent a {
  padding: 8px 10px;
  color: #a4a4a4;
  text-decoration: none;
  display: block;
}
.dropContent a:hover {
  color: red;
}
.dropDown:hover .dropContent {
  display: block;
}

/* 网站导航 */
.dropBtnWeb {
  color: #a4a4a4;
  border: none;
  cursor: pointer;
}
.dropDownWeb {
  margin: 0;
  position: relative;
  display: inline-block;
}
.dropContentWeb {
  position: absolute;
  display: none;
  min-width: 160px;
  background: #fff;
  box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px 0 8px 8px;
  right: 0;
}
.dropDownWeb:hover .dropBtnWeb {
  background-color: white;
}
.dropContentWeb a {
  /* padding: 8px 10px; */
  color: #a4a4a4;
  text-decoration: none;
  display: block;
}
.dropContentWeb a:hover {
  color: red;
}
.dropDownWeb:hover .dropContentWeb {
  display: block;
}
.dropContentWeb .webnav {
  width: 890px;
  line-height: 20px;
}
.dropContentWeb .webnav ul {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  list-style: none;
  float: left;
  padding: 0;
  width: 160px;
  margin: 22px 8px 20px 8px;
}
.dropContentWeb .webnav ul .item {
  float: left;
  width: 80px;
  font-weight: lighter;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 手机版 */
.dropBtncart {
  color: #a4a4a4;
  border: none;
  cursor: pointer;
}
.dropDowncart {
  margin: 0;
  position: relative;
  display: inline-block;
}
.dropContentcart {
  width: 460px;
  height: 230px;
  position: absolute;
  display: none;
  background: #fff;
  box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.07);
  border-radius: 8px 0 8px 8px;
  right: 0;
}
.dropDowncart:hover .dropBtncart {
  background-color: white;
}
.dropContentcart a {
  padding: 8px 10px;
  color: #a4a4a4;
  text-decoration: none;
  display: block;
}
.dropContentcart a:hover {
  color: red;
}
.dropDowncart:hover .dropContentcart {
  display: block;
}
.dropContentcart .carthome {
  position: absolute;
  left: 180px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: #f4f4f4;
  border-radius: 50px;
}
.dropContentcart .myicon {
  font-size: 66px;
  font-weight: lighter;
  position: relative;
  top: 10px;
  left: 15px;
}
.dropContentcart .cartword {
  text-align: center;
  display: inline-block;
  position: relative;
  left: 124px;
  top: 145px;
}
.dropContentcart .cartword p {
  color: #a4a4a4;
  text-decoration: none;
  font-size: 14px;
}
.ano {
  text-align: center;
}
</style>